<template>
  <div class="login_bg">
    <div style="margin-bottom: 150px">
      <h3 style="font-size:30px;padding: 10px;color:#fff">脚本管理系统</h3>
      <Form class="login-box" ref="formInline" :model="formInline" :rules="ruleInline" style="margin-top: 0px">
        <Form-item prop="user">
          <Input type="text" v-model="formInline.user" placeholder="请输入用户名" style="width: 250px">
          <Icon type="ios-person-outline" slot="prepend"/>
          </Input>
        </Form-item>
        <Form-item prop="password">
          <Input type="password" v-model="formInline.password" placeholder="请输入密码" style="width: 250px"
                 @on-enter="handleSubmit('formInline')">
          <Icon type="ios-locked-outline" slot="prepend"/>
          </Input>
        </Form-item>
        <Form-item>
          <Button type="primary" @click="handleSubmit('formInline')" style="width: 250px">登录</Button>
        </Form-item>
      </Form>
    </div>
  </div>
</template>
<script>
  import utils from '../utils/user'
  export default {
    name: 'login',
    data () {
      return {
        formInline: {
          user: '',
          password: '',
        },
        ruleInline: {
          user: [
            {required: true, message: '请填写用户名', trigger: 'blur'},
            {type: 'string', min: 5, message: '用户名不能小于5位', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请填写密码', trigger: 'blur'},
            {type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
          ]
        }
      }
    },
    mounted(){
      if (utils.getName() !== '' && utils.getToken() !== '' && utils.getLevel()) {
        this.$router.push('/main')
      }
    },
    methods: {
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.axios.post("user/login", {
              account: this.formInline.user,
              password: this.formInline.password
            }).then((res) => {
              if (res) {
                this.$Message.success('登录成功')
                utils.saveToken(res.token)
                utils.saveName(res.nickname)
                utils.saveLevel(res.level)
                let userInfo = {
                  name: this.formInline.user
                }
                this.$router.push({
                  path: '/main',
                  /*query: {
                   params: JSON.stringify(userInfo)
                   }*/
                })
              }

            })
          } else {
            this.$Message.error('输入内容有误!')
          }
        })
      }
    }
  }
</script>

<!--npm install less less-loader --save-->
<style rel="stylesheet/less" lang="less" scoped>
  .login_bg {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-image: url("../assets/login.jpg");
    .login-box {
      background-color: #fff;
      border-radius: 5px;
      padding: 20px;
    }
  }
</style>

